<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<style>
			.titlebar,.tab.active{
				background-color:#18B2ED;
			}
			.titlebar h1,.tab.active label{
				font-weight:bold;
				color:white;
			}
			.titlebar a i,.titlebar a label{
				color:white;
			}
			.art_mid{
				top:45px;
				bottom:40px
			}
			
		</style>
	</head>
	<body>
		<div id="section_container">
		 <section id="sectionid" data-role="section" class="active">
		 	<header>
		 		<div class="titlebar" >
		 			<a class="left">
		 				<label class="bold"><i class="icon icon-arrowleft-fill"></i>登出</label>
		 			</a>
		 			<h1 class="text-center ">FTP例子</h2>
		 			<a class="right">
		 				<i class="icon icon-menu-fill"></i>
		 			</a>
		 		</div>
		 	</header>
		 	<article id="article_main" data-role="article" data-transition="slide"  class=" art_mid" >
		 		    <div class="input-box">
		 				<input id="filepath"  type="text" readonly placeholder="点击选择文件" style="height:35px;"></input>
		 				<i class="icon icon-folder placeholder" id="selectIcon"></i>
		 			</div>
		 			<span id="start" class="button block" style="margin:10px;">上传</span>
		 			<span id="view" class="button block bg-3" style="margin:10px;">连接ftp</span>
		 			<div id="ftp" >
		 		    <div class="bold" style="background-color:#C0C0C0;line-height:30px;" >
		 		    <span @click="back" v-if="cur_path.length>1"><i class="icon icon-arrowleft"></i>上一级</span> 
		 		    <span  style="font-size:1.2em;margin-left:10px;">path:{{cur_path}}</span></div>
		 			<ul id="dirList" class="list newlist" data-scroll="verticle" style="height:50%">
		 				<div class="scroller">
		 				<li v-for="item in list" @click="on_tap(item)" style="line-height:35px;">
		 				<div class="justify">
		 					<i class="icon icon-folder size30" v-if="item.type=='DIR'"></i> 
		 					<i class="icon icon-file size30" v-else="item.type=='FILE'"></i> 
		 				</div>
		 				<div class="justify-content">
		 				<span>
		 					{{item.info}}
		 				</span>	</div>	
		 				<span class="button bg-6" @click="download(item)" style="margin:5px;" v-if="item.type=='FILE'">下载</span>
		 				<span class="button bg-9" @click="delfile(item)"  style="margin:5px;" v-if="item.type=='FILE'">删除</span>
		 				</li>
		 				</div>
		 			</ul>
		 			</div>
		 	</article>
		 	<article id="article_serv"  data-role="article" data-transition="slide" data-scroll="verticle" class="active art_mid" >
		 		<div class="scroller">
		 		    <div  class="input-box">
		 				<input id="filepath2"  type="text" readonly placeholder="点击选择文件" style="height:35px;"></input>
		 				<i class="icon icon-folder placeholder size30" id="selectIcon2" style="padding:5px;"></i>
		 				<i class="icon icon-camera placeholder size30" id="photo" style="padding:5px;"></i>
		 			</div>
		 			<span id="uploadImg" class="button block" style="margin:10px;">上传</span>
		 			<div>
		 				<h1>本地展示</h1>
		 				<img src="" id="localimg" ></img>
		 			</div>
		 			<div id="recal_img">
		 				
		 			</div>
		 		</div>
		 	</article>
		 	<article id="article_conf" data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
		 		<div class="scroller">
		 			pageconfig
		 		</div>
		 	</article>
		 	<footer>
				<ul class="menubar" style="line-height: 40px;">
					<li class="tab " data-role="tab" href="#article_main" data-toggle="article">
						<label class="text-center">ftp</label>
					</li>
					<li class="tab active" data-role="tab"  href="#article_serv" data-toggle="article">
						<label class="text-center">base64</label>
					</li>
					<li class="tab " data-role="tab"  href="#article_conf" data-toggle="article">
						<label class="text-center">设置</label>
					</li>
				</ul>
		 	</footer>
		 </section>
		</div>
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<script src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/agile/js/agile.js"></script>
		<script src="../assets/app/js/app.seedsui.js"></script>
		<script src="../assets/cgs_token/csg_util.js"></script>
		<script src="../assets/cgs_token/checkInterface.js"></script>
		<script src="../assets/bridge/exmobi.js"></script>
		<script src="../assets/third/vue/vue.min.js"></script>
		<script>
		var isbridge = false
		var cameraWindow = false
		$(document).on('plusready',function(){
			//alert('ready')
			isbridge = true
			cameraWindow = new CameraWindow();
		})
		var fileSelected = false
		var success,fail = false
		var viewOk = false
		var downLoadOk  = false
		var delfileOK= false
		var ImgOk = false
		$(function(){
			fileSelected = function(data){
				if(data.code==0){
					$('#filepath').val(data.filePath)
				}else{
					A.showToast('取消操作！')
				}
			}
			success = function(data){
				A.showToast(data.responseText)
				viewPath("/upload")
			}
			fail = function(data){
				A.showToast(data.responseText)
			}
			var fileSelected2 = function(data){
				if(data.code==0){
					$('#filepath2').val(data.filePath)
				}else{
					A.showToast('取消操作！')
				}
			}
			
			$('#uploadImg').on('click',function(){
				if(isbridge){
					var f_path  =$('#filepath2').val()
					var param = []
					param.push({type:1,name:"file",value:f_path})
					var ajaxData = {};
                    ajaxData.data = param;    
                    ajaxData.method = "POST";  
                    ajaxData.isBlock = true; 
                    ajaxData.url = "/getbase64Img";     
                    ajaxData.successFunction = "ImgOk";  
                    ajaxData.failFunction = "fail"; 
                    var ajax = new FormSubmit(ajaxData);
                    ajax.send();
				}else{
					return false
				}
			})
			ImgOk = function(data){
				var json = eval("("+data.responseText+")")
				var base64str = 'data:image/png;base64,'+json.base64
				var htmlstr = '<img src = "'+base64str+'" style="width:300px;"></img>';
				$('#recal_img').html(htmlstr)
			}
			
			$('#start').on('click',function(){
				if(isbridge){
					var f_path  =$('#filepath').val()
					var param = []
					param.push({type:1,name:"file",value:f_path})
					var ajaxData = {};
                    ajaxData.data = param;    
                    ajaxData.method = "POST";  
                    ajaxData.isBlock = true; 
                    ajaxData.url = "/ftpUpload";     
                    ajaxData.successFunction = "success";  
                    ajaxData.failFunction = "fail"; 
                    var ajax = new FormSubmit(ajaxData);
                    ajax.send();
				}else{
					return false
				}
			})
			//文件夹预览列表
			var ftpVm = new Vue({
				el:'#ftp',
				data:{
					list:[],
					cur_path:"/"
				},
				methods:{
					on_tap:function(item){
						if(item.type=='DIR'){
						  viewPath(item.path)
						}
						return false
					},
					changeDir:function(data){
						this.list = data.list
						this.cur_path = data.path
						this.$nextTick(function(){
							A.Scroll('#dirList').refresh()
						})
					},
					back:function(){
						var parentdir = this.cur_path.substr(0,this.cur_path.lastIndexOf('/'))
						viewPath(parentdir.length>0?parentdir:"/")
					},
					download:function(data){
						downloadfile(data.path)
					},
					delfile:function(data){
						delFtpfile(data.path,this.cur_path)
					}
				}
			})
			//下载文件
			var downloadfile = function(path){
				if(isbridge){
					var param = EncryptionUtil.base64Encode(path)
					var setinfo = ClientUtil.getSetting()
					var urlstr = "http://"+setinfo.ip+":"+setinfo.port+"/process/service/"+ClientUtil.getAppId();
					var ajaxData = {};
			     	//设置url
			     	ajaxData.url = urlstr + "/ftpDownload";
			     	ajaxData.method = "POST";
			     	ajaxData.data = "data="+param;
			     	ajaxData.successFunction = "downLoadOk";
			     	ajaxData.failFunction = "fail";
			     	ajaxData.isBlock = true;
			     	ajaxData.reqCharset = "UTF-8";
			     	ajaxData.rspCharset = "UTF-8";
			     	ajaxData.connectTimeout = 30;
			     	ajaxData.timeout = 270;
			     	
					var ExDL = new DirectDownload(ajaxData);
			     	ExDL.send();
			     	
				}else{
					return false
				}
			}
			downLoadOk = function(data){
				A.showToast(data.path)
			}
			//下载文件
			var delFtpfile = function(path,cur_path){
				A.confirm("在ftp服务器中删除已选中的文件", '是否继续？', 
				function() {
				if(isbridge){
					var param = EncryptionUtil.base64Encode(path)
					var ajaxData = {};  
                    ajaxData.method = "POST"; 
                    ajaxData.data = "data="+ param
                    ajaxData.isBlock = true; 
                    ajaxData.url = "/ftpDelFile";     
                    ajaxData.successFunction = "delfileOK";  
                    ajaxData.failFunction = "fail"; 
                    var ajax = new Ajax(ajaxData)
                    ajax.setStringData("cur",cur_path)
                    ajax.send();
				}else{
					return false
				}
				},
				function(){
					A.showToast('取消操作')
					return false
				})
			}
			delfileOK = function(data){
				A.showToast(data.responseText)
				viewPath(data.getStringData("cur"))
			}
			
			
			//预览ftp文件夹
			var viewPath  = function(pathstr){
				if(isbridge){
					var param = EncryptionUtil.base64Encode(pathstr)
					var ajaxData = {};  
                    ajaxData.method = "POST"; 
                    ajaxData.data = "path="+ param
                    ajaxData.isBlock = true; 
                    ajaxData.url = "/ftpView";     
                    ajaxData.successFunction = "viewOk";  
                    ajaxData.failFunction = "fail"; 
                    var ajax = new Ajax(ajaxData)
                    ajax.setStringData("cur",pathstr)
                    ajax.send();
				}else{
					return false
				}
			}
			viewOk = function(data){
				if(data.status=200){
					var json = eval("("+data.responseText+")")
					if(json.ret){
						ftpVm.changeDir({list:json.list,path:data.getStringData("cur")})
					}else{
						A.showToast(json.msg)
					}
				}
			}
			
			$('#view').on('click',function(){
				viewPath("/")
			})
			$('#selectIcon').on('click',function(){
				if(isbridge){
					NativeUtil.selectFile({defaultPath:"res:page/www/img/user"},fileSelected)
				}else{
					return false
				}
			})
			$('#selectIcon2').on('click',function(){
				if(isbridge){
					NativeUtil.selectFile({defaultPath:"res:page/www/img/user"},fileSelected2)
				}else{
					return false
				}
			})
			
			$('#photo').on('click',function(){
				if(isbridge){     
					cameraWindow.mode='still';
                    cameraWindow.onCallback=photoCalbak;
                    cameraWindow.pwidth = 800;
                    cameraWindow.path = 'sys:/db/img/'
					cameraWindow.startCamera()
				}else{
					return false
				}
			})
			var photoCalbak = function(data){
			   if(cameraWindow.isSuccess()){
				$('#filepath2').val(cameraWindow.value)
				$('#localimg').attr('src',cameraWindow.value)
				
			   }else{
			   	A.showToast('已取消')
			   }
			}
		})
		</script>
	</body>
</html>